<template>
  <IFexHeaderMain>
    <!-- <template #header>
      <IHeader>首页</IHeader>
    </template> -->
    <view class="home_main whov">
      <scroll-view scroll-y class="wh_auto scroll_main" @click="onClick" @scroll="onScroll">
        <view class="car_name flex_left_right">
          <view class="ellipsis_2 name flex_left">{{ carName }}</view>
          <view class="flex_left" style="width: 22rpx">
            <view class="wrapper">
              <image :src="'/static/img/car/nextla.png'" mode="aspectFit" />
            </view>
          </view>
        </view>
        <view class="car_detail_car">
          <image :src="'/static/img/car/wenjie_car.png'" mode="aspectFit" style="width: 100vw; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast" />
        </view>
        <view class="car_detail ellipsis_2">{{ carDis }}</view>
        <image :src="'/static/img/car/shangjie_img.png'" mode="aspectFit" style="width: 100vw; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast" />
      </scroll-view>
      <view v-if="showBuyCar" class="gc">购车</view>
    </view>
    <template #footer>
      <image :src="'/static/img/car/shangjie_bottom.png'" />
    </template>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="index">
  import { computed, onMounted, ref } from 'vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { getTopHeight } from '@/utils'
  import { getDetailApi } from '@/api/comm'
  import useUserInfoStore from '@/store/userInfo'
  const showBuyCar = ref(false)
  const carName = computed(() => {
    const userInfoStore = useUserInfoStore()
    return userInfoStore.getDetailData.carName
  })
  const carDis = computed(() => {
    const userInfoStore = useUserInfoStore()
    return userInfoStore.getDetailData.carDis
  })
  // 尚界 H5 纯电 Pro·陶瓷白·夜阑灰·19英寸低风阻轮毂
  const onClick = () => {
    uni.navigateTo({ url: '/pages/car/wenjie/detail' })
  }
  const onScroll = (e: any) => {
    const scrollTop = e?.detail?.scrollTop || e?.target?.scrollTop || 0
    console.log(scrollTop >= 136)
    showBuyCar.value = scrollTop >= 136
  }
  onMounted(async () => {
    const result = await getDetailApi({ dataType: 'wenjie' })
    if (result) {
      const userInfoStore = useUserInfoStore()
      userInfoStore.setDetailData(JSON.parse(result.data.dataJson))
    }
  })
</script>

<style scoped lang="scss">
  .scroll_main {
    position: relative;
    .car_name {
      position: absolute;
      top: 70rpx;
      left: 34rpx;
      z-index: 999999;
      .name {
        font-size: 43rpx;
        width: 460rpx;
        font-weight: 600;
        line-height: 48rpx;
        color: #1f1f20;
      }
    }
    .car_detail {
      position: absolute;
      top: 590rpx;
      z-index: 999999;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 32rpx;
      width: 75%;
      margin: 0 auto;
    }
    .car_detail_car {
      position: absolute;
      top: 280rpx;
      z-index: 999999;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 24rpx;
    }
  }
  .home_main {
    background: #ffffff;
    position: relative;
  }
  .gc {
    position: absolute;
    top: 70rpx;
    left: 34rpx;
    font-size: 4rpx;
    z-index: 9999999;
  }
  uni-image {
    height: auto;
  }
</style>
